import React, { useEffect, useState } from 'react'
import {
    Modal,
    Button,
    Form,
    Input,
    Select,
    Checkbox
} from 'antd';
import { edit } from './column';
import type { GetProp } from 'antd';
import type { FormProps } from 'antd';
import { data } from './column'
export default function useform(props) {
    //弹框的属性

    // console.log(edit());
    //表单

    const onFinish: FormProps['onFinish'] = (values) => {
        console.log('Success:', values);
        data.push({ ...values, key: data.length + 1 })
        console.log(data);

    };
    const [isModalOpen, setIsModalOpen] = useState(false);

    const showModal = () => {
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(true);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };
    // 监听props.show的变化
    // 如果props.show为true，则打开弹框
    // 如果props.show为false，则关闭弹框
    useEffect(() => {
        if (props.show) {
            showModal()
        }
    }, [props.show])

    const plainOptions = ['前端工程师', 'DEVELOPER', 'DOORINGDOORING'];
    return (
        <div>
            <Modal title={props.title} open={isModalOpen} footer={null} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    onFinish={onFinish}
                    style={{ maxWidth: 600 }}
                >

                    <Form.Item label="用户名" name='name'>
                        <Input placeholder="请输入用户名" />
                    </Form.Item>
                    <Form.Item label="角色" name='role'>

                        <Select placeholder="请选择角色" allowClear>
                            <Select.Option value={1} >超级管理员</Select.Option>
                            <Select.Option value={2}>开发者</Select.Option>
                        </Select>
                    </Form.Item>
                    <Form.Item label="简介" name='desc'>
                        <Input placeholder="请输入简介" />
                    </Form.Item>
                    <Form.Item label="标签" name='tags'>
                        <Checkbox.Group options={plainOptions} defaultValue={['Apple']} />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
